<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button class="del">1</button><button class="del">2</button><button class="del">3</button><button
            class="del">4</button><button class="del">5</button><button class="del">6</button><button
            class="del">7</button><button class="del">8</button><button class="del">9</button><button
            class="del">10</button>
        <button class="update">1</button><button class="update">2</button><button class="update">3</button>
    </div>
    <script>
        /*
            事件委托--- 
                利用事件冒泡的特点--(事件从内到外 冒泡)  把一个元素（子元素）的事件 委托给另一个元素（上级元素）

                1-效率高-不用循环
                2-可以给未来元素添加事件

        */
        // 如果 按钮比较多 上万个，要添加点击事件，获取这10000个按钮，循环遍历添加点击事件--效率低


        //      
        var div = document.querySelector('div');
        document.onclick = function (evt) {
            // console.log('点了div');
            // console.log(evt.target);
            // 判断事件源的类名
            if (evt.target.className == 'del') {
                console.log('删除按钮的代码');
            } else if (evt.target.className == 'update') {
                console.log('删除修改的代码');

            }
        }

        setTimeout(function () {

            var str = '<button class="update">222</button>'
            div.innerHTML += str;

        }, 5000)


    </script>

</body>

</html>